<template>
	<view class="goods-info-card u-flex ">
		<image class="info-img" 
			:src="goods.mainImage || goods.goodsImage"
			 mode="aspectFill"></image>
		<view class="info-right">
			<view class="info-name">{{ goods.name ||goods.goodsName }}</view>
			<view class="u-flex u-flex-between">
				<up-text mode="price" color="#000" size="14" :text="goods.salePrice || goods.money"></up-text>
				<view class="f-s-14">x{{ goods.count ||goods.quantity}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		goods: {
			type: Object,
			default: () => ({})
		}
	})
</script>

<style lang="scss">
	.goods-info-card {
		padding: 18px;
		background-color: #fff;
		margin-bottom: 10px;
		
		.info-img{
			width: 80px;
			height: 80px; 
		}
		
		.info-right {
			margin-left: 18px;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #000;

			.info-name {
				font-size: 16px;
				font-weight: bolder;
				color: #000;
				line-height: 22px;
			}
		}
	}
</style>